<template>
	<a-modal
		v-model:visible="visible"
		title="试剂品类选择"
		:mask-closable="false"
		:width="1000"
		:destroy-on-close="true"
		:footer="null"
	>
		<div class="table-operator" style="margin-bottom: 10px">
			<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form"
					:model="searchFormState">
				<a-row :gutter="24">
					<a-col :span="5">
						<a-form-item label="CAS" name="casNo">
							<a-input v-model:value.trim="searchFormState.casNo"
									 placeholder="请输入CAS编号"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="5">
						<a-form-item label="名称" name="name">
							<a-input v-model:value.trim="searchFormState.name" placeholder="请输入名称"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="5">
						<a-form-item label="类型" name="state">
							<a-select v-model:value="searchFormState.classId" placeholder="请选择类型"
									  :options="storageTypeOptions" allowClear/>
						</a-form-item>
					</a-col>

					<a-col :span="5">
						<a-form-item label="形态" name="state">
							<a-select v-model:value="searchFormState.formId" placeholder="请选择形态"
									  :options="formTypeOptions" allowClear/>
						</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-button type="primary" class="primarySele" @click="loadData(searchFormState)"> 查询
						</a-button>
						<a-button class="snowy-buttom-left" @click="resetForm()"> 重置
						</a-button>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<div class="user-table">
			<a-table
				ref="table"
				size="small"
				:columns="commons"
				:data-source="tableData"
				bordered
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'unit'">
						<a-tag v-if="record.unit === '0'" color="purple">毫升</a-tag>
						<a-tag v-if="record.unit === '1'" color="cyan">克</a-tag>
					</template>
					<template v-if="column.dataIndex === 'action'">
						<a-button type="primary" size="small" @click="addRecord(record)">选择</a-button>
					</template>
				</template>
			</a-table>
		</div>
	</a-modal>
</template>
<script setup name="reagentClassModal">

	import fileApi from '@/api/dev/fileApi'
	import sysConfig from '@/config/index'
	import { cloneDeep } from "lodash-es";
	import bizGoodsApi from "@/api/biz/bizGoodsApi";
	import tool from '@/utils/tool'
	import bizReagentClassApi from '@/api/biz/bizReagentClassApi'

	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const searchFormState = reactive({})
	const searchFormRef = ref()
	// 主表格common
	const commons = [
		{
			title: 'CAS',
			dataIndex: 'casNo'
		},
		{
			title: '名称',
			dataIndex: 'reagentName'
		},
		{
			title: '类型',
			dataIndex: 'className'
		},
		{
			title: '形态',
			dataIndex: 'formName'
		},
		{
			title: '试剂瓶类型',
			dataIndex: 'bottleTypeName'
		},
		{
			title: '试剂单位',
			dataIndex: 'unit'
		},
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: '150px'
		}
	]
	const tableData = ref([])

	//类型
	const storageTypeOptions = tool.dictList('REAGENT_STORAGE_TYPE')
	//形态
	const formTypeOptions = tool.dictList('REAGENT_FORM_TYPE')

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		loadData()
	}

	const resetForm = () => {
		searchFormRef.value.resetFields()
		searchFormState.classId = null
		searchFormState.formId = null
	}

	const loadData = () => {
		const param = cloneDeep(searchFormState)
		bizReagentClassApi.bizReagentClassList(param).then((res) => {
			tableData.value = res
		})
	}

	const addRecord = (data) => {
		if(data){
			resetForm()
			emit('chooseReagentClass', data)
			visible.value = false
		}

	}

	// 抛出函数
	defineExpose({
		onOpen
	})
</script>

<style lang="less" scoped>
	.user-table {
		overflow: auto;
		max-height: 750px;
	}
</style>
